<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <a href="insertOrUpdate.html">新增</a>
    <table border="1">
        <tr>
            <th>id</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in products">
            <td>{{item.id}}</td>
            <td>{{item.productName}}</td>
            <td>{{item.price}}</td>
            <td>{{item.createTime}}</td>
            <td>
                <button v-click="deleteById(item.id)">删除</button>
                <button v-click="updateById(item.id)">修改</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            products: [],

        },
        methods: {
            findAll: function () {
                var _this = this;
                axios.get("/product/findAll").then(function (res) {

                    _this.products = res.data
                })

            },

            updateById: function (id) {
                window.localStorage.setItem("id", id);
                // window.location.href = "insertOrUpdate.html"
            },
            deleteById:function (id) {
                var _this=this
                axios.get("/product/deleteById?id="+id).then(function (res){
                    _this.findAll()
                })
            },

        },
        mounted() {
            this.findAll()
        }
    })
</script>
</html>